<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta charset="UTF-8">
    <title>用户充值页面 </title>
    <link rel="stylesheet" type="text/css" href="<?php echo $image_url;?>files/chongzhi/css/amazeui.min.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $image_url;?>files/chongzhi/css/main.css" />

</head>
<body style="padding: 0;margin: 0;">
<div class="pay">
    <!--主内容开始编辑-->
    <div class="tr_recharge">
        <div class="tr_rechtext">
            <p class="te_retit"><img src="<?php echo $image_url;?>files/chongzhi/images/coin.png" alt="" />充值中心</p>
        </div>
        <form action="<?php echo $base_url."ay/chongzhi"?>" class="am-form" id="doc-vld-msg">
            <div class="tr_rechbox" style="font-size: 14px;">
                <div class="tr_rechhead">
                    <img width="50px" src="<?php echo $user['headimgurl'];?>" />
                    <p>帐号：<a><?php echo $user['nickname']?></a> </p>
                    <div class="tr_rechheadcion">
                        <img src="<?php echo $image_url;?>files/chongzhi/images/coin.png" alt="" />
                        <span>剩余：<span><?php echo $card;?>房卡</span></span>
                    </div>
                </div>
                <div class="tr_rechli am-form-group">
                    <ul class="ui-choose am-form-group" id="uc_01">
                        <?php foreach ($showArr as $key=>$item){?>
                        <li>
                            <label class="am-radio-inline">
                                <p class="title"><input type="radio"  value="<?php echo $key?>" val-amount="<?php echo $item['pay_amount']?>" val-count="<?php echo $item['count']?>" name="pay_data"
                                                      <?php echo $key == 0 ? "required" : "";?>  data-validation-message="请选择一项充值额度">￥<?php echo $item['title']?></p>
                                <p class="desc"><?php echo $item['desc']?></p>
                            </label>
                        </li>
                        <?php }?>
                    </ul>
                    <!--<span>1招兵币=1元 10元起充</span>-->
                </div>
                <!--<div class="tr_rechoth am-form-group">
                    <span>其他金额：</span>
                    <input type="number" min="10" max="10000" value="10.00元" class="othbox" data-validation-message="充值金额范围：10-10000元" />
                </div>
                -->
                <div class="tr_rechcho am-form-group">
                    <label class="am-radio">
                        <input type="radio" name="pay_type" value="wechat_QR" data-am-ucheck required data-validation-message="请选择一种充值方式"><img src="<?php echo $image_url;?>files/chongzhi/images/wechatpay.png">
                    </label>
                    <label class="am-radio">
                        <input type="radio" name="pay_type" value="alipay_QR" data-am-ucheck data-validation-message="请选择一种充值方式"><img src="<?php echo $image_url;?>files/chongzhi/images/zfbpay.png">
                    </label>
                </div>
                <div class="tr_rechnum">
                    <span>应付金额：</span>
                    <p class="rechnum">0.00元</p>
                </div>
            </div>
            <div class="tr_paybox">
                <input type="submit" value="确认支付" class="tr_pay am-btn" />
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" src="<?php echo $image_url;?>files/chongzhi/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $image_url;?>files/chongzhi/js/amazeui.min.js"></script>
<script type="text/javascript" src="<?php echo $image_url;?>files/chongzhi/js/ui-choose.js"></script>
<script type="text/javascript">
    // 将所有.ui-choose实例化
    $('.ui-choose').ui_choose();
    // uc_01 ul 单选
    var uc_01 = $('#uc_01').data('ui-choose'); // 取回已实例化的对象
    uc_01.click = function(index, item) {
        console.log('click', index, item.attr("val-amount"))
    }
    uc_01.change = function(index, item) {
        console.log('change', index, item.attr("val-amount"))
    }
    $(function() {
        $('#uc_01 li').click(function() {
            // $('.tr_rechoth').show();
            $('.tr_rechoth').find("input").attr('required', 'true')
            $('.rechnum').text($(this).find("input").attr("val-amount") + '元');
        })


        // $('.othbox').on('input propertychange', function() {
        //     var num = $(this).val();
        //     $('.rechnum').html(num + ".00元");
        // });

    })

    $(function() {
        $('#doc-vld-msg').validator({
            onValid: function(validity) {
                $(validity.field).closest('.am-form-group').find('.am-alert').hide();
            },
            onInValid: function(validity) {
                var $field = $(validity.field);
                var $group = $field.closest('.am-form-group');
                var $alert = $group.find('.am-alert');
                // 使用自定义的提示信息 或 插件内置的提示信息
                var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

                if(!$alert.length) {
                    $alert = $('<div class="am-alert am-alert-danger"></div>').hide().
                    appendTo($group);
                }
                $alert.html(msg).show();
            }
        });
    });
</script>

</body>
</html>